<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-27 16:37:34
 * @LastEditors: wangming
 * @LastEditTime: 2022-03-23 10:45:01
 * @Description: file content
-->
<template>
  <el-form-item
    label="行背景渲染函数"
    class="item-block"
  >
    <div class="list-item" @click="handleEdit">
      <div class="list-data">export default function { ... }</div>
      <div class="list-actions">
        <el-button type="text">
          <i class="el-icon-edit"></i>
        </el-button>
      </div>
    </div>
  </el-form-item>
</template>

<script>
import CustomFnModal from "./customFnModal";
import basicmixins from "./basicmixins";

const TABLEROWBACKGROUND = `/**
 * 自定义函数
 * @param {*} row 行
 * @param {*}  rowIndex 行索引
 * @returns
 *  String
 */
export default function(row, rowIndex) {
  return '';
}`;

export default {
  mixins: [basicmixins],
  data() {
    return {};
  },
  methods: {
    handleEdit() {
      const template = TABLEROWBACKGROUND;
      CustomFnModal.init({
        title: "行背景渲染函数",
        content: this.value.__config.rowBackLoadFunction || template,
        onConfirm: (data) => {
          this.$set(this.value.__config, "rowBackLoadFunction", data);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f3f9ff;
  padding: 5px 10px;
  border-radius: 3px;
  line-height: 1.5;

  cursor: pointer;

  &:nth-child(n + 2) {
    margin-top: 8px;
  }
}

.list-data {
  width: 70%;
  word-break: break-all;
}

.item-block {
  ::v-deep .el-form-item__label {
    float: none;
  }
}
</style>
